<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
    <div v-if="!menusList.length" class="flex_center_around no-box">
      <div class="no-img" :style="{'backgroundImage': 'url(' + require('./assets/noPermission.png') + ')'}">
        <div style="position: absolute;bottom: 58px;right: 100px;font-size: 20px;">
          <el-button type="primary" size="mini" @click="logout">{{ '退 出' }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import store from './store'
import { get } from '@/api/request'
import { mapGetters } from 'vuex'
window.onbeforeunload = function() {
  var n = window.event.screenX - window.screenLeft
  var b = n > document.documentElement.scrollWidth - 20
  if (b && window.event.clientY < 0 || window.event.altKey) {
    Cookies.remove('vue_admin_template_admin_token')
    Cookies.remove('vue_admin_template_admin_refresh')
    window.localStorage.clear()
  }
}
window.addEventListener('online', function() {
  store.dispatch('app/toggleNetworkMonitor', { online: true, offline: false, popUp: true, content: '网络已恢复正常' })
})
window.addEventListener('offline', function() {
  store.dispatch('app/toggleNetworkMonitor', { online: false, offline: true, popUp: true, content: '当前网络不可用，请检查您的网络状态' })
})
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  computed: {
    ...mapGetters([
      'menusList'
    ])
  },
  mounted() {
    window.addEventListener('keydown', this.handleEvent)
    window.addEventListener('online', this.updateOnlineStatus)
    window.addEventListener('offline', this.updateOnlineStatus)
    // if (localStorage.getItem('admin_acadyearterm') && JSON.parse(localStorage.getItem('admin_acadyearterm')).current) {
    //   this.$store.dispatch('app/toggleAcadyearterm', JSON.parse(localStorage.getItem('admin_acadyearterm')))
    // } else {
    // this.getAcadYearTerm()
    // }
    this.getSchoolConfig()

    // if (localStorage.getItem('admin_project_config')) {
    //   this.$set(require('@/settings.js'), 'project_config', JSON.parse(localStorage.getItem('admin_project_config')))
    //   localStorage.removeItem('admin_project_config')
    // }
    // this.getProjectConfig()
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleEvent)
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOnlineStatus)
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    },
    async getSchoolConfig() {
      await get(`login/config`).then(response => {
        if (response.code === 0) {
          this.$store.dispatch('app/toggleSchoolConfig', response.data)
        }
      })
    },
    // async getAcadYearTerm() {
    //   await get(`acad-year-term?method=get`).then(response => {
    //     if (response.code === 0) {
    //       let is_now = false
    //       console.log('获取学年学期成功-----', response.data)
    //       response.data.forEach((item) => {
    //         if (item.is_now) {
    //           is_now = true
    //           console.log('获取到后台返回的默认学年学期', { list: response.data, current: item })
    //           this.$store.dispatch('app/toggleAcadyearterm', { list: response.data, current: item })
    //         }
    //       })
    //       if (!is_now) {
    //         this.$store.dispatch('app/toggleAcadyearterm', { list: response.data, current: response.data[0] })
    //       }
    //     }
    //   })
    // },
    getQueryVariable(variable) {
      const query = JSON.parse(localStorage.getItem('leader')).query.split('?')[1]
      const vars = unescape(query).split('&')
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=')
        if (pair[0] === variable) {
          return pair[1]
        }
      }
      return (false)
    },
    async logout() {
      window.localStorage.clear()
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    async handleEvent(event) {
      console.log('store.getters.forbidden', store.getters.forbidden)
      switch (event.keyCode) {
        case 37:
          console.log('ctrl + ←')
          break
        case 38:
          console.log('ctrl + ↑')
          break
        case 39:
          console.log('ctrl + →')
          break
        case 40:
          console.log('ctrl + ↓')
          break
        case 67:
          console.log('ctrl + c')
          break
        case 83:
          console.log('ctrl + s')
          if (!event.ctrlKey) return // 防止S键被阻止
          event.preventDefault()
          event.returnValue = false
          if (event.ctrlKey && event.code === 'KeyS') return false
          break
        case 86:
          console.log('ctrl + v')
          break
        case 89:
          console.log('ctrl + y')
          if (event.ctrlKey && event.code === 'KeyY') {
            this.$router.go(+1)
          }
          break
        case 90:
          if (this.$route.path === '/dashboard/index') return
          if (event.ctrlKey && event.code === 'KeyZ') {
            this.$router.go(-1)
          }
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .no-box {
    width: 100%;height: 100%;position: fixed;top: 0;z-index: 20;
  }
  .no-img {
    position: relative;width: 600px;height: 600px;background-repeat: no-repeat;background-size: cover;
  }
</style>

<style lang="scss">
  .el-message-box__btns {
    width:100%;
    display:flex;
    flex-direction:row;
    .el-button{
      flex:1;
      letter-spacing: 5px;
      font-weight: bold;
    }
    button:nth-child(2) {
      margin-left: 30px
    }
  }
</style>
